<template>
    <div class="editIndex">
        <el-dialog :before-close="close" title="请求参数外包装" :visible.sync="show">
            <el-button type="success" @click="add" size="small">新增</el-button>
            <div></div><br>
            <el-table :data="list" border style="width: 100%">
                <el-table-column prop="name" label="key">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.key"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="type">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.type"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="value">
                    <template slot-scope="scope">
                        <el-input type="textarea" autosize  v-model="scope.row.val"></el-input>
                    </template>
                </el-table-column>

                <el-table-column prop="dataStatus" label="返回字段实体">
                    <template slot-scope="scope">
                        <el-switch :active-value="1" :inactive-value="0" @change="changeSwich(list,scope.$index)" v-model="scope.row.dataStatus" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column  label="操作">
                    <template slot-scope="scope">
                        <el-button size="small" v-if="scope.row.dataStatus != 1" @click="deleteData(scope.$index, list)" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="sendEdit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { requestData } from '@/api'
export default {
    name: 'editIndex',
    data(){
        return{
            list:[]
        }
    },
    props: {
        /**
         *  @show    展示弹窗
         */
        show: {
            type: Boolean
        },
    },
    components: {

    },
    created () {
      this.getOutPackage() //获取请求参数的外包装
    },
    mounted: function() {
        // this.editShow = this.show
    },
    computed:{

    },
    methods:{
        changeSwich(row,index){
            // console.log(val)
            row.map(item=>{
                item.dataStatus = 0
            })
            row[index].dataStatus = 1
        },
        deleteData(index, rows){
            rows.splice(index, 1);
        },
        async sendEdit(){ //确认修改
            let res = await requestData(2,'/updateOutPackage',{json:JSON.stringify(this.list)})
            this.$emit('editDiog')
        },
        add(){
            let data = {
                type:'',
                val:'',
                key:'',
                dataStatus:0
            }
            this.list.push(data)
        },
        close(){
            this.$emit('editDiog')
        },
        //获取请求参数的外包装
        async getOutPackage(){
            let res = await requestData(2,'/getOutPackage',{})
            this.list = res
        },
    }
}
</script>
<style lang="scss" scope>
.editIndex{
    .input_class{
        width:200px;
    }
}
</style>